<template>
  <div class="content">
    <Form ref inline :label-width="150">
      <FormItem label="安全等级分数段">
        <Row>
          <Col span="11">
            <Input v-model="safeLevel.min" placeholder="最低分"></Input>
          </Col>
          <Col span="2" style="text-align:center;">至</Col>
          <Col span="11">
            <Input v-model="safeLevel.max" placeholder="最高分"></Input>
          </Col>
        </Row>
      </FormItem>
      <FormItem label="轻微告警等级分数段">
        <Row>
          <Col span="11">
            <Input v-model="slightLevel.min" placeholder="最低分"></Input>
          </Col>
          <Col span="2" style="text-align:center;">至</Col>
          <Col span="11">
            <Input v-model="slightLevel.max" placeholder="最高分"></Input>
          </Col>
        </Row>
      </FormItem>
      <FormItem label="中等告警等级分数段">
        <Row>
          <Col span="11">
            <Input v-model="mediumLevel.min" placeholder="最低分"></Input>
          </Col>
          <Col span="2" style="text-align:center;">至</Col>
          <Col span="11">
            <Input v-model="mediumLevel.max" placeholder="最高分"></Input>
          </Col>
        </Row>
      </FormItem>
      <FormItem label="严重告警等级分数段">
        <Row>
          <Col span="11">
            <Input v-model="severityLevel.min" placeholder="最低分"></Input>
          </Col>
          <Col span="2" style="text-align:center;">至</Col>
          <Col span="11">
            <Input v-model="severityLevel.max" placeholder="最高分"></Input>
          </Col>
        </Row>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="saveRuleConfig">保存</Button>
        <Button @click="closeModal">取消</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      safeLevel: {
        min: 100,
        max: 100
      },
      slightLevel: {
        min: 80,
        max: 99
      },
      mediumLevel: {
        min: 60,
        max: 79
      },
      severityLevel: {
        min: 0,
        max: 59
      },
      storagedData: null
    };
  },
  created() {
    if (localStorage.ruleConfig) {
      this.storagedData = JSON.parse(localStorage.ruleConfig);
      this.slightLevel = this.storagedData.slightLevel
        ? this.storagedData.slightLevel
        : this.slightLevel;
      this.safeLevel = this.storagedData.safeLevel
        ? this.storagedData.safeLevel
        : this.safeLevel;
      this.mediumLevel = this.storagedData.mediumLevel
        ? this.storagedData.mediumLevel
        : this.mediumLevel;
      this.severityLevel = this.storagedData.severityLevel
        ? this.storagedData.severityLevel
        : this.severityLevel;
    }
  },
  methods: {
    saveRuleConfig() {
      const ruleData = {
        safeLevel: this.safeLevel,
        slightLevel: this.slightLevel,
        mediumLevel: this.mediumLevel,
        severityLevel: this.severityLevel
      };
      this.storagedData = JSON.stringify(ruleData)
      localStorage.ruleConfig = this.storagedData
      this.$bus.emit('rule-changed',true)
      this.closeModal();
    },
    closeModal(){
      this.$bus.emit('close-config-modal',true)
    }
  }
};
</script>

<style scoped>
</style>